<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover" />
    <title>Document</title>
  </head>
  <body>
    <style>
      body {
        background: #050901;
      }

      /* 1.0 标题 */
      .title {
        position: relative;
        padding: 25px 30px;
        display: block;
        text-align: center;
        color: #03e9f4;
        font-size: 24px;
        text-transform: uppercase;
        transition: 0.5s;
        letter-spacing: 4px;
        cursor: pointer;
        overflow: hidden;
        margin: 0 auto;
      }
      .title:hover {
        background-color: #03e9f4;
        color: #050801;
        box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
      }
      .title div {
        position: absolute;
      }
      .title div:nth-child(1) {
        width: 100%;
        height: 2px;
        top: 0;
        left: -100%;
        background: linear-gradient(to right, transparent, #03e9f4);
        animation: animate1 1s linear infinite;
      }
      .title div:nth-child(2) {
        width: 2px;
        height: 100%;
        top: -100%;
        right: 0;
        background: linear-gradient(to bottom, transparent, #03e9f4);
        animation: animate2 1s linear infinite;
        animation-delay: 0.25s;
      }
      .title div:nth-child(3) {
        width: 100%;
        height: 2px;
        bottom: 0;
        right: -100%;
        background: linear-gradient(to left, transparent, #03e9f4);
        animation: animate3 1s linear infinite;
        animation-delay: 0.5s;
      }
      .title div:nth-child(4) {
        width: 2px;
        height: 100%;
        bottom: -100%;
        left: 0;
        background: linear-gradient(to top, transparent, #03e9f4);
        animation: animate4 1s linear infinite;
        animation-delay: 0.75s;
      }
      @keyframes animate1 {
        0% {
          left: -100%;
        }
        50%,
        100% {
          left: 100%;
        }
      }
      @keyframes animate2 {
        0% {
          top: -100%;
        }
        50%,
        100% {
          top: 100%;
        }
      }
      @keyframes animate3 {
        0% {
          right: -100%;
        }
        50%,
        100% {
          right: 100%;
        }
      }
      @keyframes animate4 {
        0% {
          bottom: -100%;
        }
        50%,
        100% {
          bottom: 100%;
        }
      }
      /* 按钮 */
      .light {
        text-decoration: none;
        display: block;
        width: fit-content;
        padding: 25px 30px;
        color: #03e9f4;
        font-size: 24px;
        text-transform: uppercase;
        transition: 0.5s;
        letter-spacing: 4px;
        cursor: pointer;
        animation: light_btn 1s alternate infinite;
        margin: calc(10vh) auto 0;
      }
      .light:active {
        background-color: #03e9f4;
        color: #050801;
        box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
      }
      @keyframes light_btn {
        100% {
          background-color: #03e9f4;
          color: #050801;
          box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
        }
      }
    </style>
    <div class="title">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      欢迎光临
    </div>
    <a href="./effect03.html" class="light">充电效果</a>
    <a href="./effect01.html" class="light">梦幻西游</a>
    <a href="./effect02.html" class="light">一键三连</a>
  </body>
</html>
